今天的學習會碰一點點的程式
首先，先來認識 Vue 的專案結構

vite-project/
├─ .vscode/            # 存放 VSCode 編輯器的設定檔 (非必要)
├─ node_modules/       # 這裡存放 npm 安裝的所有套件
├─ public/             # 放一些靜態資源（不會經過 Vite 打包）
├─ src/                # 會將主程式放在這裡
├─ .gitignore          # 告訴 Git 哪些檔案不用被版本控制
├─ index.html          # 網頁入口檔，會載入 src/main.js
├─ package.json        # 記錄我們的套件安裝了哪些套件或是 scripts
├─ package-lock.json   # 會鎖定套件的確切版本，希望解決版本差異的問題
├─ README.md           # 專案說明文件
└─ vite.config.js      # Vite 的設定檔

接下來，來看看 src 資料夾裡面

src/
├─ assets/            # 放需要經過 Vite 打包處理的靜態資源 (eg. 圖片)
│  └─ vue.svg         # 放在 assets 的資源會被 Vite 最佳化、壓縮，放在 public 則不會
├─ components/        # 放元件的地方
│  └─ HelloWorld.vue  # Vite 的範例元件，未來我們可以自訂自己的 component
├─ App.vue            # root component (最上層的畫面結構) 通常在這邊組合多個元件
├─ main.js            # 程式進入點，負責把 App.vue 掛載到 index.html
└─ style.css          # 樣式表，可以當成網頁的衣服、裝飾

我會將 App.vue 理解為房子的藍圖，components 是房子裡的家具零件，main.js 則是蓋房子的工人

簡單小程式環節，自訂自己的 component

p.s.在開始之前，要先到 VSCode 的 extension 下載 Vue 的 valor，不然 VSCode 會認不得 .vue 這個檔案

在 components 裡面新增一個 HelloVite.Vue

<!-- 這邊要注意：我犯了一個錯誤，因不是一般的 HTML 所以 div 外面要再多包一層 template，Vue 才會正確辨認 -->
<template>
  <div class="hello-vite">
    <h1>{{ title }}</h1>
    <p>This is my first Vue component</p>
    <button @click="greet">Greet</button>
  </div>
</template>


<script>
export default {
  name: 'HelloVite',
  data() {
    return {
      title: 'Hello Vite!',
      count: 0
    }
  },
  methods:{
    greet(){
      alert(`Vite Greet: Welcome User !!!`)
    }
  }
}
</script>

在 App.vue 裡面使用剛剛自訂的元件

<script setup>
import HelloVite from './components/HelloVite.vue'
</script>

<template>
  <!-- <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div> -->
  <!-- <HelloWorld msg="Vite + Vue" /> -->

  <HelloVite />
  
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

這樣就完成了，今日進度先到這邊
明天繼續加油

ref:
https://cn.vite.dev/guide/
https://blog.miniasp.com/post/2025/03/26/In-depth-understanding-of-the-purpose-and-applicable-scenarios-of-package-lockjson
https://ithelp.ithome.com.tw/m/articles/10320621